<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

    <input type="file" id="file">
    <script>
        let eleFile = document.querySelector('#file');
        let reader = new FileReader(),img = new Image();
        let file = null;

        // canvas
        let canvas = document.createElement('canvas');
        let context = canvas.getContext('2d');

        // 
        reader.onload = function(e) {
            img.src = e.target.result;
        }

        img.onload = function() {
            var originWidth = this.width;
            var originHeight = this.height;
            // console.log(originWidth, originHeight)
            var maxWidth = 400, maxHeight = 400;
            var targetWidth = originWidth, targetHeight = originHeight;
            if (originWidth > maxWidth || originHeight > maxHeight) {
                if (originWidth / originHeight > maxWidth / maxHeight)  {
                    targetWidth = maxWidth;
                    targetHeight = Math.round(maxWidth * (originHeight / originWidth));
                } else {
                    targetHeight = maxHeight;
                    targetWidth = Math.round(maxHeight * (originWidth / originHeight));
                }
            }
            canvas.width = targetWidth;
            canvas.height = targetHeight;

            context.drawImage(img,0,0,targetWidth,targetHeight);
        }

        eleFile.addEventListener('change',function(event) {
            file = event.target.files[0];

            if(file.type.indexOf('image') == 0) {
                reader.readAsDataURL(file); // base64
            }
        })


    </script>
</body>
</html> -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="file" id="file">
  <script>
  var eleFile = document.querySelector('#file');
  var reader = new FileReader(), img = new Image();
  var file = null;
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  
  reader.onload = function(e) {
    img.src = e.target.result;
  } 

  img.onload = function() {
    var originWidth = this.width;
      var originHeight = this.height;
      // console.log(originWidth, originHeight)
      var maxWidth = 400, maxHeight = 400;
      var targetWidth = originWidth, targetHeight = originHeight;
      if (originWidth > maxWidth || originHeight > maxHeight) {
          if (originWidth / originHeight > maxWidth / maxHeight)  {
              targetWidth = maxWidth;
              targetHeight = Math.round(maxWidth * (originHeight / originWidth));
          } else {
              targetHeight = maxHeight;
              targetWidth = Math.round(maxHeight * (originWidth / originHeight));
          }
      }
      canvas.width = targetWidth;
      canvas.height = targetHeight;
      context.drawImage(img, 0, 0, targetWidth, targetHeight);

      // 将 canvas 转换成 blob 流文件
      canvas.toBlob(function(blob) {

        // 利用 xhr 对象将 blob 流文件发送给服务器
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() { // 监听response状态改变
            if(xhr.status === 200) {
                console.log(xhr.responseText);
            }
        }
        xhr.open("POST",'/upload',true);
        xhr.send(blob);
      })
      

      document.body.appendChild(canvas);
  }

  eleFile.addEventListener('change', function(event) {
    file = event.target.files[0];
    if (file.type.indexOf('image') == 0) {
      reader.readAsDataURL(file);
    }
  })


  </script>
</body>
</html>